<!-- Copyright 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="/static/bower_components/app-router/app-router.html">
<link rel="import" href="/static/bower_components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="/static/bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="/static/bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="/static/bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="/static/bower_components/paper-item/paper-item.html">
<link rel="import" href="/static/bower_components/paper-button/paper-button.html">
<link rel="import" href="/static/bower_components/paper-shadow/paper-shadow.html">

<polymer-element name="bb-app">
  <template>
    <style>
      core-item[subhead] {
        margin-top: 8px;
        margin-bottom: 8px;
        padding-top: 8px;
        padding-left: 16px;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.50);
        font-size: 14px;
        border-top: 1px solid #CECECE;
        pointer-events: none;
      }
      core-scaffold::shadow core-toolbar, core-toolbar {
        background: #3F51B5;
        color: #FFFFFF;
      }
    </style>
    <core-scaffold>
      <core-header-panel navigation flex mode="seamed">

        <core-toolbar>
          BuildBucket
        </core-toolbar>

        <core-selector selected="{{route}}" valueattr="hash" layout vertical>

          <paper-item hash="">Home</paper-item>
          <core-item subhead>Documentation</core-item>
          <paper-item hash="docs/basics">Basics</paper-item>
          <paper-item hash="docs/conventions">Conventions</paper-item>
          <paper-item hash="docs/build">Build</paper-item>
          <paper-item hash="docs/buildbot">Buildbot</paper-item>
          <paper-item hash="docs/access-control">Access control</paper-item>

        </core-menu>
      </core-header-panel>

      <core-toolbar tool flex>
        <div flex>{{activePage.pageTitle}}</div>
        <core-icon-button icon="bug-report" on-click="{{reportBug}}">
        </core-icon-button>
      </core-toolbar>
      <div>
        <app-router id="appRouter" mode="hash"
            on-activate-route-end="{{hashChanged}}">

          <app-route path="docs" redirect="docs/basics"></app-route>

          <app-route path="docs/basics"
            import="/static/html/docs/basics.html" template></app-route>

          <app-route path="docs/conventions"
            import="/static/html/docs/conventions.html" template></app-route>

          <app-route path="docs/build"
              import="/static/html/docs/build.html" template></app-route>

          <app-route path="docs/buildbot"
              import="/static/html/docs/buildbot.html" template></app-route>

          <app-route path="docs/access-control"
              import="/static/html/docs/access-control.html" template></app-route>

          <app-route path="*"
              import="/static/html/home.html" template></app-route>

        </app-router>

      </div>
    </core-scaffold>
  </template>

  <script>
    Polymer({
      getCurrentPath: function () {
        var path = this.$.appRouter.activeRoute.getAttribute("path");
        if (path == "*") {
          path = "";
        }
        return path;
      },
      routeChanged: function () {
        if (this.route != this.getCurrentPath()) {
          this.$.appRouter.go(this.route || "");
        }
      },
      hashChanged: function () {
        this.route = this.getCurrentPath();
        this.activePage = this.$.appRouter.activeRoute.firstElementChild;
      },
      reportBug: function () {
        var url = "https://code.google.com/p/chromium/issues/entry";
        var params = {
          summary: "buildbucket: ",
          comment: (
              "Enter build description:\n\n" +
              "Page: " + document.location
          ),
          labels: "Infra-BuildBucket",
          owner: "nodir@chromium.org"
        };
        document.location = url + "?" + this.encodeQueryData(params);
      },

      // Misc
      encodeQueryData: function (data) {
         var result = [];
         for (var d in data) {
            result.push(
                encodeURIComponent(d) + "=" + encodeURIComponent(data[d]));
         }
         return result.join("&");
      }
    })
  </script>
</polymer-element>
